<template>
  <div class="base-window">
    <div class="box-borders-top">
      <div class="row-s-z">
        <div class="imgbg-l" style="display: flex;">
          <div class="box-t-i"></div>
          <div class="box-t-t">{{ props.title }}</div>
        </div>
        <div class="imgbg-r">
        </div>
      </div>
    </div>
    <div class="box-centre-content" :style="`height:${contentHeight}rem;`">
      <div class="box-centre-content-bg" :style="`height:${contentHeight}rem;`"></div>
      <slot></slot>
    </div>
    <div class="box-borders-bottom">
      <div class="row-s-z b-o-b">
        <div class="imgbg-r t-b-b-o" style="border-radius: 0vh 3.66vh 0vh 0vh;"></div>
        <div class="imgbg-l t-b-b-o" style="border-radius: 3.66vh 0vh 0vh 0vh;"></div>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps(['title', 'contentHeight'])

</script>

<style lang="scss" scoped>
.base-window {
  height: 100%;
  width: 30em;

  .box-borders-top {
    border-top: 1px solid #409EFF;
    border-radius: 50px;
  }

  .imgbg-l {
    background: url(/src/assets/wbe4/l-bj-l-1.png) center no-repeat;
    height: 3rem;
    width: 50%;
    background-color: #003246;
    border-radius: 20px 0px 0px 0px;
  }

  .imgbg-r {
    background: url(/src/assets/wbe4/l-bj-r-1.png) center no-repeat;
    height: 3rem;
    width: 50%;
    background-color: #003246;
    border-radius: 0px 20px 0px 0px;
  }

  .row-s-z {
    display: flex;
    justify-content: space-between;
    user-select: none;
    background-color: #006b86;
    border-radius: 5rem;
  }

  .box-centre-content {
    width: 30em;
    background: url(/src/assets/wbe4/l-bj-1-line.png) center no-repeat;
    background-color: #003f6f;
  }

  .box-centre-content-bg {
    opacity: 0.8;
    position: absolute;
    width: 100%;
    background-color: #003f6f;
  }

  .box-t-t {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    height: 4rem;
    line-height: 3.5rem;
    margin-left: 0.5rem;
  }

  .box-t-i {
    margin-top: 0.5rem;
    margin-left: 1rem;
    width: 32px;
    height: 32px;
    background: url(/src/assets/wbe4/tubiao.png) center no-repeat;
  }

  .t-b-b-o {
    transform: rotate(180deg);
    background-color: #003f6f;
    opacity: 0.8;
  }

  .b-o-b {
    background-color: #006b86;
    opacity: 0.8;
    border-radius: 0vh 0vh 3vh 3vh;
    box-shadow: inset 0 0 40px #0fbff3;
  }
}
</style>
